import React, {FC, useEffect, useState} from 'react';
import { Pagination } from 'antd';
import styles from "./PaginationQuestion.module.scss"
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
import {LIST_PAGE_KEY, LIST_PAGESIZE_KEY, LIST_SEARCH_KEY} from "../constant";
type  PageQue ={
    total:number
}

const PaginationQuestion:FC<PageQue> = ( pageQue:PageQue)=>{

    //这里需要监听url的参数的变化
    const [page,setPage] = useState(1);
    const [pageS,setPageS] = useState(14);
     const [searchPathms] = useSearchParams();

    useEffect(()=>{
        const pag =parseInt(searchPathms.get(LIST_PAGE_KEY)||'') || 1 ;
        const pagSize =parseInt(searchPathms.get(LIST_PAGESIZE_KEY)||'') || 10 ;
        setPage(pag);
        setPageS(pagSize);
    },[searchPathms])

    const nav = useNavigate();
    const {pathname} =useLocation();
    // console.log(pathname+"?????");
       function  handleUrlChange(page:number,pageSize:number){
           searchPathms.set(LIST_PAGE_KEY,page.toString());
           console.log(searchPathms.toString()+"??");
           searchPathms.set(LIST_PAGESIZE_KEY,pageSize.toString());
               nav({
                   pathname,
                   search:searchPathms.toString(),
               })
       }


    return(
        <div className={styles.container}>
            <Pagination  current={page} pageSize={pageS} total={pageQue.total} onChange={handleUrlChange}  />
        </div>
    )
}

 // <Pagination total={500} itemRender={itemRender} />;

export default PaginationQuestion;